<template>	
	<div class="screen_wrap echarts_box flex_wrap">
        <corner></corner>
        <title1 title="考核点水质优III类占比"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%" autoresize></e-chart>
		</div>
	</div>		
</template>
<script>
	import { getSwapThreeTypeNum } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'		
	export default {
		components: {
			corner,title1
		},	
		data() {
			return {
				option: null,
				xdata:[],
				provinceRate:[],
				cityRate:[]
			}
		},
		mounted() {	
			this.initData()
		},
		methods: {
			initData(){
				getSwapThreeTypeNum().then(res=>{					
					res.data.data.forEach(item=>{
						this.xdata.push(item.time)
						this.provinceRate.push(item.provinceRate)
						this.cityRate.push(item.cityRate)
					})
					this.init()
				})				
			},
			init() {
				this.option = {
			        legend: {
			            data: ['省控以上','市控以上'],
						left:'60%',
						top: "5%",
						textStyle: {
							color: this.$fontColor,
							fontSize: 12
						}			            
			        },					
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(0, 255, 233,0)'
									}, {
										offset: 0.5,
										color: 'rgba(255, 255, 255,1)',
									}, {
										offset: 1,
										color: 'rgba(0, 255, 233,0)'
									}],
									global: false
								}
							},
						},
					},
					grid: {
						top: '20%',
						left: '8%',
						right: '8%',
						bottom: '10%',
						containLabel: false
					},
					xAxis: [{
						type: 'category',
						axisLine: {
							show: true
						},
						splitArea: {
							// show: true,
							color: '#f00',
							lineStyle: {
								color: '#f00'
							},
						},
						axisLabel: {
							color: '#fff'
						},
						splitLine: {
							show: false
						},
						boundaryGap: false,
						data: this.xdata,

					}],

					yAxis: [{
						type: 'value',
						min: 0,
						// max: 140,
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,0.1)'
							}
						},
						axisLine: {
							show: true,
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#d1e6eb',

							},
						},
						axisTick: {
							show: false,
						},
					}],
					series: [{
							name: '省控以上',
							type: 'line',
							smooth: true, //是否平滑
							showAllSymbol: true,
							// symbol: 'image://./static/images/guang-circle.png',
							symbol: 'circle',
							symbolSize: 15,
							lineStyle: {
								normal: {
									color: "#00b3f4",
									shadowColor: 'rgba(0, 0, 0, .3)',
									shadowBlur: 0,
									shadowOffsetY: 5,
									shadowOffsetX: 5,
								},
							},
							label: {
								show: true,
								position: 'top',
								textStyle: {
									color: '#00b3f4',
								},
								formatter: "{c}%",
							},
							itemStyle: {
								color: "#00b3f4",
								borderColor: "#fff",
								borderWidth: 3,
								shadowColor: 'rgba(0, 0, 0, .3)',
								shadowBlur: 0,
								shadowOffsetY: 2,
								shadowOffsetX: 2,
							},
							areaStyle: {
								normal: {
									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(0,179,244,0.3)'
										},
										{
											offset: 1,
											color: 'rgba(0,179,244,0)'
										}
									], false),
									shadowColor: 'rgba(0,179,244, 0.9)',
									shadowBlur: 20
								}
							},
							data: this.provinceRate
						},
						{
							name: '市控以上',
							type: 'line',
							smooth: true, //是否平滑
							showAllSymbol: true,
							// symbol: 'image://./static/images/guang-circle.png',
							symbol: 'circle',
							symbolSize: 15,
							lineStyle: {
								normal: {
									color: "#00ca95",
									shadowColor: 'rgba(0, 0, 0, .3)',
									shadowBlur: 0,
									shadowOffsetY: 5,
									shadowOffsetX: 5,
								},
							},
							label: {
								show: true,
								position: 'top',
								textStyle: {
									color: '#00ca95',
								},
								formatter: "{c}%"
							},

							itemStyle: {
								color: "#00ca95",
								borderColor: "#fff",
								borderWidth: 3,
								shadowColor: 'rgba(0, 0, 0, .3)',
								shadowBlur: 0,
								shadowOffsetY: 2,
								shadowOffsetX: 2,
							},
							areaStyle: {
								normal: {
									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(0,202,149,0.3)'
										},
										{
											offset: 1,
											color: 'rgba(0,202,149,0)'
										}
									], false),
									shadowColor: 'rgba(0,202,149, 0.9)',
									shadowBlur: 20
								}
							},
							data: this.cityRate
						}
					]
				};
			}

		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		height: 100%;
	}
	
	.body {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.charts {
		flex: 1;
	}
	
	.headline {
		display: flex;
		color: #fff;
		.title {
			background: #131420;
			padding: 8px 15px;
			display: inline-block;
			font-size: 14px;
			box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
			border: 1px solid #3591ff80;
		}
	}
</style>